{{extend 'layout_add_story.html'}}

<h1>Add a Story</h1>

<div>
<p>
If you are reading or listening to a story at NPR.org and want to add the story to a roadtrip, use the bookmarklet below to easily send you right here to this page and automatically fill in the form below with the correct values.  
</p>
<p>
To add the bookmarklet to your browser, just drag this "
<a title="Use this bookmarklet to automatically get the ID of a story at npr.org." href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://publicradioroadtrip.googlecode.com/hg/static/sendvariables.js';})();">Add to Roadtrip!</a>" link into your browser's bookmarks bar. (In Internet Explorer, right-click on the link and choose "Add to favorites.") </p>
</div>

<!-- script type="text/javascript" src="http://publicradioroadtrip.googlecode.com/hg/static/getvariables.js"></script -->
<!-- script type="text/javascript" src="http://localhost:8000/publicradioroadtrip/static/getvariables.js"></script -->


<h3>Place Story on Map</h3>
 
1) Type Location of Story: <input type="text" id="address"/><input type="button" value="2: Go to Location" onclick="geocode()"><input type="button" value="3: Add Location to Story" onclick="addMarkerAtCenter()"/> 
  <div id="map"> 
    <div id="map_canvas" style="width:100%; height:400px"></div> 
    <div id="crosshair"></div> 
  </div> 
 
  <table> 
    <tr><td>Lat/Lng:</td><td><div id="latlng"></div></td></tr> 
    <tr><td>Address:</td><td><div id="formatedAddress"></div></td></tr> 
    <tr><td>Zoom Level</td><td><div id="zoom_level">2</div></td></tr> 
  </table> 

<h3>Story Information</h3>

{{if request.vars.nprid:}}
{{=form}}
<script type="text/javascript">
document.getElementById("story_image__row").style.display = 'none';
document.getElementById("story_image_url__row").style.display = 'none';
document.getElementById("story_audio__row").style.display = 'none';
document.getElementById("story_audio_url__row").style.display = 'none';
document.getElementById("story_qrcode__row").style.display = 'none';
</script>
{{else:}}
{{=form}}
<script type="text/javascript">
document.getElementById("story_nprid__row").style.display = 'none';
document.getElementById("story_qrcode__row").style.display = 'none';
</script>
{{pass}}
